<script setup>
import { ref , nextTick} from 'vue';
import QRCode from 'qrcode'
//动画
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

const isLogin = ref(true)

const loginData = ref({
    username:'',
    password:'',
    rePassword:''
})

const checkPassword = (rule,value,callback)=>{
    if(value === ''){
        callback(new Error('请确认输入密码'))
    }else if(value != loginData.value.password){
        callback(new Error("两次输入密码不一致"))
    }else(
        callback()
    )
}

const rules = {
    username:[
        {required:true,message:"请输入用户名",trigger:'blur'},
        {min:3,max:6,message:"请输入长度为3~6的非空字符"}
    ],
    password:[
        {required:true,message:"请输入密码",trigger:'blur'},
        {min:6,max:15,message:"请输入长度为6~15的非空字符"}
    ],
    rePassword:[
        {validator:checkPassword,trigger:'blur'}
    ]
}

const clearLoginDta = ()=>{
    loginData.value = {
        username:'',
        password:'',
        rePassword:''
    }
}

//弹框
const dialogVisible = ref(false)

const qrcodeCanvas = ref(null)//引用canvas元素,canvas元素：矩形区域，开发者可以在其中使用JavaScript的绘图API来绘制图形
//打开对话框并生成二维码
const openDialog = ()=>{
    dialogVisible.value = true//打开对话框
    nextTick(()=>{//nextTick:确保dom更新完成后在生成二维码
        const text = 'https://example.com'
        QRCode.toCanvas(qrcodeCanvas.value,text,{width:200,},(error)=>{//QRCode.toCanvas:将text内容编码为二维码，并渲染到qrcodeCanvas.value（即<canvas>元素）上。
            if(error){
                console.error('生成二维码失败',error)
            }
        })
    })
}







</script>

<template>
    <div>
        <el-row class="Login-page">
        <div class="lottieId"> 
            <DotLottieVue  autoplay loop src="https://lottie.host/efbe483d-d96d-4aac-b08a-3faad9c1ccbd/m9apHrSSdV.lottie" /> 
        </div>
        <div class="Login-box">
            <el-form  :model="loginData" v-if="isLogin" :rules="rules" >
                <el-form-item style="margin:30px auto 30px;">
                    <h1 style="margin:0 auto;" class="title" >后端管理系统</h1>
                </el-form-item>
                <el-form-item prop="username" style="margin:30px auto 30px; width:300px;">
                    <el-input prefix-icon="User" placeholder="请输入用户名" v-model="loginData.username" ></el-input>
                </el-form-item>
                <el-form-item prop="password" style="margin:30px auto 30px; width:300px;">
                    <el-input prefix-icon="Lock" placeholder="请输入密码" type="password" v-model="loginData.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="margin:5px auto 5px; width:300px;" >登录</el-button>
                </el-form-item>
                <el-form-item  >
                    <el-button type="success" style="margin:5px auto 5px; width:300px;"  @click="isLogin=false,clearLoginDta()">
                        <el-link >注册</el-link>
                    </el-button>
                </el-form-item>
                <el-form-item  >
                    <el-button type="primary" style="margin:5px auto 5px; width:300px;" @click="dialogVisible = true,openDialog()">
                        <el-link >第三方登录</el-link>
                    </el-button>
                </el-form-item>
            </el-form>

            <el-form :model="loginData" v-else :rules="rules">
                <el-form-item style="margin:30px auto 30px;">
                    <h1 style="margin:0 auto;" class="title">后端管理系统</h1>
                </el-form-item>
                <el-form-item prop="username" style="margin:30px auto 30px; width:300px;">
                    <el-input prefix-icon="User" placeholder="请输入用户名" v-model="loginData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password" style="margin:30px auto 30px; width:300px;">
                    <el-input prefix-icon="Lock" placeholder="请输入密码" type="password" v-model="loginData.password"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword" style="margin:30px auto 30px; width:300px;">
                    <el-input prefix-icon="Lock" placeholder="请确认输入密码" type="password" v-model="loginData.rePassword"></el-input>
                </el-form-item>
                <el-form-item  >
                    <el-button type="success" style="margin:5px auto 5px; width:300px;">注册</el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" style="margin:5px auto 5px; width:300px;" @click="isLogin=true,clearLoginDta()">
                        <el-link >返回</el-link>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-row>
    
    <el-dialog v-model="dialogVisible" title="扫码登录" header-class="dialog-header" width="30%">
        <span style="font-size: 30px;color:lightseagreen; font-family:Arial, Helvetica, sans-serif">使用微信扫码登录</span>
        <template #footer>
            <div class="dialog-footer">
                <canvas ref="qrcodeCanvas"></canvas>
            </div>
        </template>
    </el-dialog>
    </div>
    

    
</template>
   
<style scoped>
.Login-page{
    display: flex;
    align-items: center;
    justify-content: end;
    background: linear-gradient(45deg , rgb(114, 162, 228), white, rgb(95, 214, 172));
    min-height: 100vh;
    width: 100%;
    height:100vh;
}
.Login-box{
    border: 5px solid #62d5db;
    border-radius: 20px;
    box-shadow: 6px 6px 15px #62d5db;
    width: 400px;
    height: 450px;
    position: relative;
    right: 300px;
}
.title{
    font-size: 40px;
    color: rgb(54, 161, 194);
    font-weight: bold;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.lottieId{
    position: relative;
    right:200px;
    width: 70%;
    height: 70%;
}
canvas{
  display: block;
  margin: 0 auto; /* 居中显示 */
}
.dialog-header{
    font-size: 25px;
    color: lightseagreen;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
